<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
    <!-- 卡片视图区域 -->
    <el-card>
    <!-- tab区域  -->
    <el-form :model="updateForm" :rules="addFormRules"
     ref="addFormRef" label-width="100px" label-position="top">
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="updateForm.goodsName"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goodsPrice">
                <el-input v-model="updateForm.goodsPrice" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goodsWeight">
                <el-input v-model="updateForm.goodsWeight" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goodsNumber">
                <el-input v-model="updateForm.goodsNumber" type="number"></el-input>
            </el-form-item>
           
            <el-form-item lable="商品分类" prop="goodsCat">
                 <!-- 级联选择框 -->
                <el-cascader
                expand-trigger="hover"
                v-model="updateForm.goodsCat"
                :options="catelist"
                :props="cateProps"
                @change="handleChange"></el-cascader>
            </el-form-item>
            <!-- 渲染表单的item -->
        <el-form-item :label="item.attrName" v-for="item in updateForm.manyAttrs" :key="item.id" >
        <div :label="cb" v-for="(cb,i) in item.attrVals" :key="i" border  style="width: 100%;" >
       <div style="width: 100%;border:1px solid #409eff;margin-top: 10px; ">
        <el-checkbox v-model="item.checkeds[i]" :checked="item.checkeds[i]">{{cb}}
            <span style="margin-left: 20px;">
            <el-input type="number" size="mini" v-model="item.addPrice[i]" placeholder="请输入该商品增加多少钱" style="position: relative;top:-3px; width: 70px;"></el-input>
        </span></el-checkbox>  
        </div>
    </div>       
   </el-form-item>
    <el-form-item>
    <el-checkbox v-model="item.checkeds" v-for="item in updateForm.onlyAttrs" :key="item.id" style="width: 300px;" :checked="item.checkeds==='true'">
        {{item.attrName}} 
        <el-input v-model="item.attrVals" :disabled="item.checkeds==='false'" ></el-input>
    </el-checkbox>
    </el-form-item>
        </el-form>
        
    </el-card>
    </div>
    </template>
    <script>
    import '@/assets/css/global.css'

    import _ from 'lodash'
    export default {
    data(){
        return{
           //商品源数据
           goods:'',
        //添加商品表单
        updateForm:{
            goodsName:'',
            goodsPrice:0,
            goodsWeight:0,
            goodsNumber:0,
            //商品分类
            goodsCat:[],
            //普通图片
            pics:[],
            //详情图片
            detailPics:[],
            //商品动态参数
            manyAttrs:[],
            //商品静态属性
            onlyAttrs:[],
       
        },
        addFormRules:{
            goodsName:[
            {required:true,message:'请输入商品名称',trigger:'blur'} 
            ],
            goodsPrice:[{required:true,message:'请输入商品价格',trigger:'blur'} ],
            goodsWeight:[{required:true,message:'请输入商品重量',trigger:'blur'} ],
            goodsNumber:[{required:true,message:'请输入商品数量',trigger:'blur'} ],
            goodsCat:[{required:true,message:'请输入商品分类',trigger:'blur'} ]
        },
        catelist:[],
        //级联选择框的配置对象
        cateProps:{
                value:'catId',
                label:'catName',
                children:'children',
                multiple: true, 
            checkStrictly: true 
            },
            cat:[]

    }},

    created () {
        
        this.getCateList()
    },
    methods:{
        //初始化表单数据
        updateForm1(row){
           this.goods=_.cloneDeep(row)
        const goodscat =row.goodsCat.split(",")
        // goodscat.forEach(item=>item=item.split(' '))
        for (let i = 0; i < goodscat.length; i++) {
            goodscat[i] = goodscat[i].split(' ')
            }
           row.manyAttrs.forEach(item => {
                    item.attrVals= item.attrVals?item.attrVals.split(' '):[]
                    item.addPrice=item.addPrice?item.addPrice.split(' '):[]
                    item.urls= item.urls?item.urls.split(' '):[]
                    item.checkeds=item.checkeds?item.checkeds.split(' ').map(val => val === 'true'):[]
                })
      
        this.updateForm.goodsName=row.goodsName
        this.updateForm.goodsPrice=row.goodsPrice
        this.updateForm.goodsWeight=row.goodsWeight
        this.updateForm.goodsNumber=row.goodsNumber
         this.updateForm.goodsCat=goodscat
         this.updateForm.pics=row.pics
         this.updateForm.detailPics=row.detailPics
         this.updateForm.manyAttrs=row.manyAttrs
       this.updateForm.onlyAttrs=row.onlyAttrs
    
       
    },
    //清除表单数据
    clearUpdateForm(){
        this.goods=''
        this.updateForm.goodsName=''
        this.updateForm.goodsPrice=0
        this.updateForm.goodsWeight=0
        this.updateForm.goodsNumber=0
         this.updateForm.goodsCat=[]
         this.updateForm.pics=[]
         this.updateForm.detailPics=[]
         this.updateForm.manyAttrs=[]
       this.updateForm.onlyAttrs=[]

    },
          //获取所以分类列表
      async getCateList(){
            const res= await this.$api.rear_end.categories()
            if(res.data.code===1){
            this.catelist=res.data.data  
        }else{
            this.$message.error(res.data.msg)
          }
      
        },
    //级联选择框选中项变化，会触发这个函数
    handleChange(){
        this.updateForm.goodsCat = this.updateForm.goodsCat.filter(item => item.length === 2)
        if(this.updateForm.goodsCat.length===1){
        this.cat=this.updateForm.goodsCat
        }
        if(this.updateForm.goodsCat.length>1){
            this.cat=this.updateForm.goodsCat[0]
        }
        if(this.updateForm.goodsCat.length!==1&&this.updateForm.goodsCat.length!==0){
            const index = this.updateForm.goodsCat.findIndex((item) => item[1] === this.cat[1]);
    let  t= _.cloneDeep(this.updateForm.goodsCat[0])
    this.updateForm.goodsCat.splice(0,1,this.cat[0])
    this.updateForm.goodsCat.splice(index,1,t)
        }
       
        return false
        
        },
         
        //修改商品
       update(){
            this.$refs.addFormRef.validate( async valid=>{  
                if(!valid){
                    this.$message.error('请填写必要表单项！')
                    return 
                }
               const form= _.cloneDeep(this.updateForm)
               for (let i = 0; i < form.goodsCat.length; i++) {
            form.goodsCat[i] = form.goodsCat[i].join(' ')
            }

            form.goodsCat=form.goodsCat.join(',')
               const manyAttrs=[]
            form.manyAttrs.forEach(item=>{
                const newInfo={
                    id:item.id,
                    attrId:item.attrId,
                    attrName:item.attrName,
                    attrVals:item.attrVals.join(' '),
                    addPrice:item.addPrice.join(' '),
                    manyPics:item.urls.join(' '),
                    checkeds:item.checkeds.join(' ')
                }
                manyAttrs.push(newInfo)
            })
          const onlyAttrs=[]
            form.onlyAttrs.forEach(item=>{
                const newInfo={
                    id:item.id,
                    attrId:item.attrId,
                    attrName:item.attrName,
                    attrVals:item.attrVals,
                    checkeds:item.checkeds
                }
                onlyAttrs.push(newInfo)
            })
           form.manyAttrs=manyAttrs
           form.onlyAttrs=onlyAttrs
         this.goods.goodsName=form.goodsName
         this.goods.goodsPrice=form.goodsPrice
         this.goods.goodsWeight=form.goodsWeight
         this.goods.goodsNumber=form.goodsNumber
         this.goods.goodsCat=form.goodsCat
         this.goods.pics=form.pics
         this.goods.detailPics=form.detailPics
         this.goods.manyAttrs=form.manyAttrs
         this.goods.onlyAttrs=form.onlyAttrs
             const res=await this.$api.rear_end.updateGoods(this.goods)
             if(res.data.code!==1){
                this.$message.error(res.data.msg)
             }
             else{
                this.$message.success("修改商品成功！")
                
                this.$router.push('/goods')
             }
            })
        },
        
        
    },
    computed:{
        cateId(){
            if(this.updateForm.goodsCat[0].length===2){
            return this.updateForm.goodsCat[0][1]
        }else{
            return null
        }  
    }
    }
    }
    
    </script>
    
    <style  scoped lang="less">
    .el-checkbox{
        margin: 0 10px 0 0 !important;
    }
    .upload-demo{
        margin: 5px 0;
    }
    .previewImg{
        width: 100%;
    }
    
    
    </style>